<template>
  <div >
    <el-card style="margin-top:1em">
      <el-table
        :data="articles"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="封面"
          width="180">
          <template>
            <!-- lazy懒加载效果 https://element.eleme.cn/#/zh-CN/component/image#lan-jia-zai -->
            <!-- <span>{{ scope.row.cover.images[0] }}</span> -->
            <el-image>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="280">
        </el-table-column>
        <el-table-column
          prop="content"
          label="文章内容"
          width="280">
        </el-table-column>
        <el-table-column
          prop="pubdate"
          label="发布时间">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="hEdit(scope.$index, scope.row)"></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
               style="margin-top:10px;"
               background
               layout="prev, pager, next"
               @current-change="hPageChange"
               :page-size="10"
               :total="total_count">
</el-pagination>
    </el-card>

  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  data () {
    return {
      form: {
        dateRange: null // 表示一个时间区间
      },
      isLoading: false,
      articles: [],
      total_count: 1, // 当前查询能查到的总条数
      curPage: 1 // 表示当前要查询页码
    }
  },
  created () {
    this.loadArticles()
  },
  methods: {
    getCond () {
      const { dateRange, status } = this.form
      const queryObj = {
        page: this.curPage,
        status
      }
      // 1) 检查用户是否选择了日期区域
      if (dateRange) {
        // 当用户选择了日期区域之后，dateRange就是一个数组
        // 需要补充参数
        queryObj.begin_pubdate = dateRange[0]
        queryObj.end_pubdate = dateRange[1]
      }
      // 2) 检查是否选中了频道
      // 由于在created时，就会调用一次查询，而此时，子组件并没有创建出来
      // 所以this.$refs.refChannel是不存在的
      if (this.$refs.refChannel && this.$refs.refChannel.channelId) {
        queryObj.channel_id = this.$refs.refChannel.channelId
        console.log('频道下拉中选中的是：', this.$refs.refChannel.channelId)
      } else {
        queryObj.channel_id = null
      }
      return queryObj
    },
    loadArticles () {
      this.$http.get('http://localhost:3000/wen').then((response) => {
        console.log(666)
        console.log(response.data)
        this.articles = response.data
        // console.log(response.data.assets[0].username)
        // console.log(JSON.stringify(response.data))
      })
    },
    // 用户点击了分页
    hPageChange (curPage) {
      // alert(curPage)
      // 1. 更新页码
      this.curPage = curPage
      // 2. 重新发请求
      this.loadArticles()
    },
    Ysearch () {
      this.loadArticles()
    },
    hEdit (index, row) {
      // 1. 获取id
      const idStr = row.id.toString()
      // 2. 传一个字符串
      this.$router.push('/edit/' + idStr)
    },
    async doDelete (idObj) {
      console.log('你要删除的数据的id是', idObj.toString())
      // 发ajax做删除
      try {
        const res = await this.$http({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + idObj.toString()
        })
        console.log(res)
        // 1. 提示
        this.$message.success('删除成功')
        // 2. 重新加载数据
        this.loadArticles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    // 用户点击删除
    handleDelete (index, row) {
      console.log(index, row)
      // 1. 让用户确认是否真的要删除
      // 问一下：是否要退出
      this.$confirm('你真的要删除吗?').then(() => {
        // 确定删除
        this.doDelete(row.id)
      }).catch(() => {
        // 取消退出 . 这里不要删除了。如果删除了，promise的结构就不完整了，当用户点了取消之后
        // 就会报错误
      })
    }
  }
}
</script>

<style scoped lang='less'>
.filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}
</style>
